<template>
  <div class="">
    <h1>购物车页面</h1>

    <van-row v-for="(item, index) in $store.state.shopcar" :key="item._id">
      <van-col span="4">
        <input
          type="checkbox"
          v-model="sel"
          :value="item"
          id=""
          @change="change"
      /></van-col>
      <van-col span="20">
        <van-swipe-cell>
          <van-card
            :price="item.price"
            :num="item.num"
            desc="描述信息"
            :title="item.title"
            :thumb="item.pic"
          >
            <template #footer>
              <van-stepper v-model="item.num" @change="changenum" />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button del"
              @click="remove(index)"
            />
          </template>
        </van-swipe-cell>
      </van-col>
    </van-row>

    <van-submit-bar :price="sum * 100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="changeall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      sel: [],
    };
  },
  mounted() {},
  methods: {
    change() {
      if (this.sel.length == this.$store.state.shopcar.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    changeall() {
      if (this.checked == true) {
        this.sel = this.$store.state.shopcar;
      } else {
        this.sel = [];
      }
    },
    changenum() {
      this.$store.commit("changenum");
    },
    remove(i) {
      this.$store.commit("remove", i);
    },
  },
  computed: {
    sum() {
      let num = 0;
      this.sel.forEach((item) => {
        num += item.price * item.num;
      });
      return num;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.del {
  height: 100% !important;
}
</style>
